import {View, Swiper, SwiperItem, Image} from '@tarojs/components'
import { useEffect, useState } from 'react';
import { getBannerList, getNavList, getProList } from '../../api/home'
import { AtGrid } from "taro-ui"
import ProList from '../../components/proList';
import { usePullDownRefresh,useReachBottom } from '@tarojs/taro' // Taro 专有 Hooks


const Home = () => {

  const [bannerList,setBannerList] = useState()

  const [navList,setNavList] = useState()

  const [proList,setProList] = useState()

  let [count, setCount] = useState(2)

  useEffect(()=>{
    getBannerList().then(res => {
      setBannerList(res.data)
    })

    setNavList(getNavList())

    getProList().then(res => {
      setProList(res.data)
    })

  }, [])


  usePullDownRefresh(() => {
    // console.log('onPullDownRefresh')
    getProList().then(res => {
      setProList(res.data)
    })
  })
  useReachBottom(() => {
    console.log('onReachBottom')
    getProList({count}).then(res => {
      if(res.data.length <= 0){
        // 轻提示
      }else {
        setProList([...proList, ...res.data])
        setCount(++count)
      }
    })
  })


  return (
    <View>
       <Swiper
         className='myswiper'
         indicatorColor='#999'
         indicatorActiveColor='#f66'
         circular
         indicatorDots
         autoplay
         style={{width: '100%', height: 180}}
       >
        {bannerList && bannerList.map(item => {
          return (<SwiperItem key={item.bannerid}>
          <View className='swiper-item'>
            <Image style={{width: '100%', height: 180}} src={item.img}></Image>
          </View>
        </SwiperItem>)
        })}
        </Swiper>

        <View style={{margin: '20px 0'}}>
          {navList && (<AtGrid  columnNum='5' data={navList} />)}
        </View>


        {/* <AtList>
          { proList && proList.map(item => {
            return (<AtListItem key={item.proid}
              title={item.proname}
              thumb={item.img1}
            />)
          }) }
        </AtList> */}
      <View>
          { proList && proList.map(item => {
              return (<ProList key={item.proid}
                title={item.proname}
                img={item.img1}
              />)
          }) }
      </View>


    </View>
  );
};

export default Home;
